<template>
  <div v-loading="loadings" class="app-container">
    <!-- 添加银行卡 -->
    <h5 class="titleInfo">银行卡详情</h5>
    <span v-if="this.form.auditStatus == 0" class="serviceInfo">审核中...</span>
    <el-form ref="form" :model="form" disabled label-width="180px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="银行卡类型">
            <el-select v-model="form.accountType" placeholder="请选择">
              <el-option
                v-for="item in reviewStatusList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 对私账户 -->
        <div v-if="form.accountType==2">
          <el-col :span="24">
            <el-form-item label="银行卡号" prop="cardNo">
              <el-input v-model="form.cardNo" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行名称" prop="bankTitle">
              <el-input v-model="form.bankTitle" />
              <!-- <el-select v-model="form.bankTitle" filterable>
                <el-option
                  v-for="(item,index) in bankNameList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="姓名" prop="accountTitle">
              <el-input v-model="form.accountTitle" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份证号" prop="identity">
              <el-input v-model="form.identity" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委托书及其附件" prop="proxyFiles">
              <attachment ref="uploadImg" :file-num="6" :file-list="fileList" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label=" ">
              <p class="titlep">
                1、请先下载《委托书模板》
                <!-- <a style="color:#409eff" href="http://mpingtest.ameimeika.com/api/downloadFile">点击下载</a> -->
              </p>
              <p class="titlep">2、委托书盖章后请上传扫描件，并上传委托书要求的其余附件，最多允许上传6个附件，支持格式：JPG、PNG、JPEG</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="this.form.auditStatus == 2" label="备注" prop="auditDesc">
              <el-input v-model="form.auditDesc" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </div>
        <!-- 对公账户 -->
        <div v-else>
          <el-col :span="24">
            <el-form-item label="银行卡号" prop="cardNo">
              <el-input v-model="form.cardNo" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行名称" prop="bankTitle">
              <el-input v-model="form.bankTitle" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行支行" prop="branchTitle">
              <el-input v-model="form.branchTitle" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业账户名称" prop="accountTitle">
              <el-input v-model="form.accountTitle" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="法人姓名" prop="enpUser">
              <el-input v-model="form.enpUser" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="社会信用码" prop="enpCode">
              <el-input v-model="form.enpCode" />
            </el-form-item>
          </el-col>
          
          <el-col :span="24">
            <el-form-item label=" ">
              <p class="titlep"><span>*</span> 以上信息请核实后填写，若信息错误，将无法绑定银行卡，后期无法进行提现<br/>
               成功提交后提示“我们会向贵单位的对公银行账户提交一笔1元以下的打款申请，请在收到款后回填打款金额完成认证即可绑定成功</p>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { infoBankCard } from '@/api/financeCard'
import attachment from '@/components/imgUpload/index'

export default {
  components: { attachment },
  data() {
    return {
      loadings: false,
      hospitalId: null,
      canClick: true, // 添加canClick
      fileList: [],
      ImgUrl: 'https://img.ameimeika.com/',
      form: {
        auditStatus: ''
      },
      // 银行卡类型下拉列表
      reviewStatusList: [
        { name: '对公账户', value: 1 },
        { name: '对私账户', value: 2 }
      ],
      bankNameList: []
    }
  },
  inject: ['reload'],
  mounted() {
    this.getInfo()
  },
  methods: {
    // 银行卡添加详情
    getInfo() {
      const datas = {
        id: Number(this.$route.query.id)
      }
      infoBankCard(datas)
        .then(res => {
          if (res.data.code == 0) {
            this.form = res.data.data
            if (this.form.accountType == 2) {
              this.form.attachment = this.form.attachment.split(',')
              if (this.form.attachment) {
                const attachments = this.form.attachment.map(item => {
                  return { url: this.ImgUrl + item }
                })
                this.fileList = attachments
                this.$nextTick(() => {
                  this.$refs.uploadImg.getLength(this.fileList)
                })
              }
            }
            if(this.form.accountType == 1){
              this.form.enpCode = this.form.identity
            }
            // console.log(res)
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.loadings = false
        })
        .catch(err => {
          // this.errorStatus(err);
          this.loadings = false
        })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    }
  }
}
</script>
<style scoped>
.app-container {
  padding: 20px !important;
}
.titlep {
  font-size: 12px;
  color: #606266;
  margin-bottom: 0;
  height: 22px;
  line-height: 22px;
}
.titlep span{
  color: red;
  font-size: 14px;
}
.serviceInfo {
  display: block;
  margin: 20px 100px;
  /* padding: 20px; */
  font-size: 30px;
  color: orange;
}
</style>
